<template>
    <view class="page-wrap">
        <image class="user-avatar" :src="userProfile.userInfo.avatarUrl || defaultAvatar"></image>
        <text class="welcome-text">您好，欢迎使用！</text>
        <text class="tips-text">为了您的账户安全，请绑定手机号</text>
        <view class="button-wrap">
            <u-button type="primary" :ripple="isRipple" open-type="getPhoneNumber" @getphonenumber="handleAuthPhone" :disabled="disabled">
                <u-icon name="phone" color="#fff" size="36" label="手机号一键绑定" label-color="#fff"></u-icon>
            </u-button>
        </view>

        <global-components ref="global-components" :loading="false"></global-components>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
    components: {},
    data() {
        return {
            disabled: false
        };
    },
    computed: {
        ...mapState(['loginCode', 'userProfile'])
    },
    methods: {
        ...mapMutations(['setUserInfo']),
        // 授权手机号
        handleAuthPhone(event) {
            console.log('handleAuthPhone', event)
            uni.showLoading({
                mask: true,
                title: '授权中...'
            });
            this.disabled = true;
            if (event.detail.encryptedData && this.userProfile.userInfo) {
                let launchOptions = uni.getLaunchOptionsSync()
                console.log('launchOptions', launchOptions)
                this.$api.auth
                    .wxMpAuth({
                        jsCode: this.loginCode,
                        infoIv: this.userProfile.iv,
                        infoEncryptedData: this.userProfile.encryptedData,
                        iv: event.detail.iv,
                        encryptedData: event.detail.encryptedData,
                        scene: launchOptions?.query?.scene
                    })
                    .then(authRes => {
                        this.$setState('token', authRes.token);
                        this.handleGetUserInfo();
                    })
                    .catch(err => {
                        this.disabled = false;
                        uni.hideLoading();
                    });
            } else {
                uni.hideLoading();
                uni.showModal({
                    content: '您拒绝了微信授权,将无法使用小程序的功能,请重新授权,谢谢',
                    showCancel: false
                });
            }
        },
        // 获取用户信息
        handleGetUserInfo() {
            this.$api.user
                .userInfo()
                .then(res => {
                    this.setUserInfo(res.user);
                    this.$setState('login', true);
                    this.$toPage({ type: 'back' });
                    this.disabled = false;
                    uni.hideLoading();
                })
                .catch(err => {
                    this.disabled = false;
                    uni.hideLoading();
                });
        }
    },
    watch: {},
    // 页面周期函数--监听页面加载
    onLoad() {},
    // 页面周期函数--监听页面初次渲染完成
    onReady() {},
    // 页面周期函数--监听页面显示(not-nvue)
    onShow() {},
    // 页面周期函数--监听页面隐藏
    onHide() {},
    // 页面周期函数--监听页面卸载
    onUnload() {},
    // 页面处理函数--监听用户下拉动作
    onPullDownRefresh() {
        uni.stopPullDownRefresh();
    },
    // 页面处理函数--监听用户上拉触底
    onReachBottom() {}
    // 页面处理函数--监听页面滚动(not-nvue)
    /* onPageScroll(event) {}, */
    // 页面处理函数--用户点击右上角分享
    /* onShareAppMessage(options) {}, */
};
</script>

<style scoped lang="scss">
.page-wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .user-avatar {
        width: 150rpx;
        height: 150rpx;
        border-radius: 100%;
    }
    .welcome-text {
        color: '#000000';
        margin: 30rpx 0;
        font-size: 40rpx;
        text-align: center;
    }
    .tips-text {
        color: #999999;
        font-size: 28rpx;
    }
    .button-wrap {
        width: 100%;
        display: flex;
        padding: 0 60rpx;
        margin-top: 200rpx;
        flex-direction: column;
    }
}
</style>
